<template>
    <div class='login'>
        <!-- vant的导航栏组件 -->
        <van-nav-bar
            title="优题典系统登录"
        />
        <!--
            表单组件输入框
            .trim是去除输入框两边的空格
        -->
        <van-cell-group>
            <van-field
            v-model.trim="userInfo.mobile"
            required
            :error-message="mobileErrMsg"
            label="手机号"
            placeholder="请输入手机号"
            />
        </van-cell-group>
        <van-cell-group>
            <van-field
            v-model.trim="userInfo.code"
            required
            label="密码"
            placeholder="请输入密码"
            :error-message="codeErrMsg"
            />
        </van-cell-group>
        <!-- 提交按钮 -->
        <div class="btn-wrap">
            <van-button type="info" @click="hLogin" class="btn">登录</van-button>
        </div>
        <!-- 使用toast组件实现loading的效果 -->
    </div>
</template>

<script>
import { login, getProfile } from '@/api/user.js'
export default {
  name: 'Login',
  data () {
    return {
      userInfo: {
        mobile: '13912345678',
        code: '246810'
      },
      mobileErrMsg: '', // 错误提示
      codeErrMsg: ''
    }
  },
  methods: {
    validtor () {
      this.mobileErrMsg = /^1[3-9]\d{9}$/.test(this.userInfo.mobile) ? '' : '请输入正确的手机格式'
      this.codeErrMsg = /\d{6}/.test(this.userInfo.code) ? '' : '数字格式不正确'
      // 如果 ErrMsg都是''，就说明通过了验证 return true
      return (this.mobileErrMsg === '' && this.codeErrMsg === '')
    },
    async hLogin () {
      // 1、表单校验
      // TODO: 表单验证
      if (!this.validtor()) {
        //   原则：尽早返回 减少嵌套层次
        return
      }
      // 2、发送请求
      // (1) 引入axios (2) 传入接口所需的参数
      const { mobile, code } = this.userInfo
      // 请求前加loading
      this.$toast.loading({
        duration: 0, // 持续展示 toast,永远不会关闭
        overlay: true, // 整体添加一个遮罩
        message: '加载中...'
      })
      //   this.$toast.loading: 由于我们引入vant，并是完整引入 ，所以vant会在vue的原型上添加$toast方法（这个方法不是vue自带，是vant组件库提供的）
      try {
        // const result = await axios({
        //   url: '/app/v1_0/authorizations',
        //   method: 'POST',
        //   data: {
        //     mobile,
        //     code
        //   }
        // })
        // 上述代码不够友好，不够语义化，不方便代码复用，不方便统一修改url地址
        const result = await login(mobile, code)
        console.log(result)
        this.$toast.success('登录成功')
        // 3、根据请求结果给出反馈，做后续
        this.$store.commit('mSetToken', result.data.data)
        const profile = await getProfile()
        this.$store.commit('mSetUserInfo', profile.data.data)
        // console.log('打印路由地址', this.$route.query)
        if (this.$route.query.jumpto) {
          console.log('打印路由地址', this.$route.query)
          this.$router.push(this.$route.query.jumpto)
        } else {
          console.log('为啥子不能登录啊')
          this.$router.push('/')
        }
      } catch (err) {
        console.log(err)
        this.$toast.success('登录失败')
      }
    }
  }
}
</script>

<style lang="less" scoped>
    .login {
        .btn-wrap {
        padding: 20px;
        .btn {
            width: 100%;
            background-color: #6db4fd;
            color:#fff;
        }
        }
    }
</style>
